<%@page import="org.firestorm.traficforecast.database.User"%>
<%@page language="java" contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Map</title>
<link rel="Icon" href="images/fav_icon.png" type="image/gif" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Mobile meta -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Form styleshets -->
<link rel="stylesheet" type="text/css" href="css/smart-forms.css">
<link rel="stylesheet" type="text/css" href="css/smart-themes/green.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="css/smart-addons.css">
<link rel="stylesheet" type="text/css"
	href="css/font_awesome/css_awesome/font-awesome.min.css">
<link rel="stylesheet" type="text/css"
	href="css/font_awesome/css_awesome/font-awesome.css">

<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/additional-methods.min.js"></script>
<script type="text/javascript" src="js/jquery.md5.js"></script>

<script type="text/javascript" src="plugins/bootstrap/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css"
	href="plugins/bootstrap/css/bootstrap-theme.css">
<link rel="stylesheet" type="text/css"
	href="plugins/bootstrap/css/bootstrap.css">

<!-- Placeholder support in IE9 and below -->
<!--[if lte IE 9]>
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.placeholder.min.js"></script>
    <![endif]-->
<!-- IE8 Fallback styling -->
<!--[if lte IE 8]>
    <link type="text/css" rel="stylesheet" href="css/smart-forms-ie8.css">
    <![endif]-->

<script type="text/javascript"
	src="https://maps.googleapis.com/maps/api/js?v=3.17&key=AIzaSyBkUHsEvJqfg49wVy2WV6jYbr1LX47_5KQ&singed_in=true&libraries=places">
	
</script>

</head>
<%
	String context = request.getContextPath();
%>
<body>
	<div class="content">
		<div class="row row-map">
			<div class="col-md-9" id="map-canvas"></div>
			<div class="col-md-3">
				<div style="border-bottom: 2px solid #ff0000">
					<%
						if (session.getAttribute("user") == null) {
					%>
					<div class="smart-forms">
						<form method="post" id="form_login">
							<div class="form-body form-body-map">
								<div class="frm-row">
									<em id="login_error" class="state-error">Đăng nhập không
										thành công. Tên đăng nhập hoặc mật khẩu không chính xác!</em>
								</div>
								<div class="frm-row">
									<em id="signup_error" class="state-error">Đăng ký không
										thành công. Vui lòng thử lại!</em>
								</div>
								<div class="frm-row form-login form-signup">
									<div class="section colm colm12">
										<label class="field prepend-icon"> <input
											name="username" id="username" type="username"
											class="gui-input" placeholder="Tên đăng nhập..."> <label
											class="field-icon"> <i class="fa fa-user"></i>
										</label>
										</label> <em id="username_error" class="state-error">Tên đăng
											nhập không được bỏ trống!</em>
									</div>
								</div>
								<div class="frm-row form-login form-signup">
									<div class="section colm colm12">
										<label class="field prepend-icon"> <input
											name="password" id="password" type="password"
											class="gui-input" placeholder="Mật khẩu..."> <label
											class="field-icon"> <i class="fa fa-lock"></i>
										</label>
										</label> <em id="password_error" class="state-error">Mật khẩu
											không được bỏ trống!</em>
									</div>
								</div>
								<div class="frm-row form-signup">
									<div class="section colm colm12">
										<label class="field prepend-icon"> <input
											name="re-password" id="re_password" type="password"
											class="gui-input" placeholder="Nhập lại mật khẩu...">
											<label class="field-icon"> <i class="fa fa-lock"></i>
										</label>
										</label> <em id="re_password_error" class="state-error">Mật khẩu
											xác nhận không chính xác!</em>
									</div>
								</div>

								<div class="frm-row" id="btn_form">
									<div class="section colm">
										<button type="button" class="button btn-green btn-form-signup"
											id="btn_form_signup">Đăng ký</button>
									</div>
									<div class="section colm">
										<button type="button" class="button btn-green btn-form-login"
											id="btn_form_login">Đăng nhập</button>
									</div>
								</div>
								<div class="frm-row" id="btn_signup">
									<div class="section colm colm12">
										<button type="button" class="button btn-green btn-signup"
											id="signup">Đăng ký</button>
									</div>
								</div>
								<div class="frm-row" id="btn_login">
									<div class="section colm colm12">
										<button type="button" class="button btn-green btn-login"
											id="login">Đăng nhập</button>
									</div>
								</div>
							</div>
						</form>
					</div>
					<%
						} else {
							User user = (User) session.getAttribute("user");
					%>
					<div class="login-name">
						<span>Xin chào, </span> <span><%=user.getUserName()%> </span> <span><a
							href="" id="logout">Thoát</a></span>
					</div>
					<%
						}
					%>
				</div>

				<div style="border-bottom: 2px solid #ff0000">
					<div class="smart-forms">
						<form method="post" id="form_search">
							<div class="form-body form-body-map">
								<div class="frm-row">
									<div class="section colm colm12">
										<label class="field prepend-icon"> <input
											name="search" id="search" type="text" class="gui-input"
											placeholder="Tìm đường..."> <label class="field-icon">
												<i class="fa fa-search"></i>
										</label>
										</label> <em id="search_error" class="state-error">Vui lòng nhập
											tên đường</em>
									</div>
								</div>
								<div class="frm-row">
									<div class="section colm colm6">
										<button type="button" class="button btn-green" id="btn_search">
											Tìm kiếm</button>
									</div>
								</div>
							</div>
						</form>
						<form method="post" id="form_direct">
							<div class="form-body form-body-map">

								<div class="frm-row">
									<div class="section colm colm12">
										<label class="field prepend-icon"> <input
											name="direct1" id="direct1" type="text" class="gui-input"
											placeholder="Nhập cung đường đầu..."> <label
											class="field-icon"> <i class="fa fa-search"></i>
										</label>
										</label> <em id="direct1_error" class="state-error">Vui lòng nhập
											tên đường</em>
									</div>
								</div>
								<div class="frm-row">
									<div class="section colm colm12">
										<label class="field prepend-icon"> <input
											name="direct2" id="direct2" type="text" class="gui-input"
											placeholder="Nhập cung đường cuối..."> <label
											class="field-icon"> <i class="fa fa-search"></i>
										</label>
										</label> <em id="direct2_error" class="state-error">Vui lòng nhập
											tên đường</em>
									</div>
								</div>

								<div class="frm-row">
									<div class="section colm colm6">
										<button type="button" class="button btn-green" id="btn_direct">
											Chỉ đường</button>
									</div>
								</div>
							</div>
						</form>
					</div>
				</div>

				<div style="border-bottom: 2px solid #ff0000">
					<div class="frm-row"></div>
				</div>
			</div>
		</div>
	</div>
</body>

<script type="text/javascript">
	$(document)
			.ready(
					function() {

						$('#btn_form_login').click(function() {
							$('.form-login').show('slow');
							$('#btn_form').hide();
							$('#btn_login').show();
						});

						$('#btn_form_signup').click(function() {
							$('.form-signup').show('slow');
							$('#btn_form').hide();
							$('#btn_signup').show();
						});

						$(document)
								.click(
										function(event) {
											var ele = $(event.target);
											if (!ele.is($('#form_login').find(
													'*'))) {
												$('.form-signup').hide();
												$('#btn_login').hide();
												$('#btn_signup').hide();
												$('#btn_form').show();
												$(
														'#username_error, #password_error, #re_password_error, #login_error, #signup_error')
														.hide();

											}
										});

						//ÄÄng nháº­p á» ÄÃ¢y
						$('#login')
								.click(
										function() {
											var username = $('#username').val();
											var password = $('#password').val();

											if (username == ""
													|| password == "") {
												if (username == "") {
													$('#username_error').show();
												}
												if (password == "") {
													$('#password_error').show();
												}
											} else {
												var objLogin = ({
													user : username,
													pass : password
												});
												var jsonobj = JSON
														.stringify(objLogin);
												var linksss = "http://"
														+ location.host
														+ "/traficforecast/process/checklogin.jsp?id=login";
												$
														.ajax({
															data : {
																para : jsonobj
															},
															dataType : 'json',
															url : linksss,
															type : 'POST',
															success : function(
																	result) {
																if (result.res) {

																	window.location.href = 'index.jsp';
																} else {
																	$(
																			"#login_error")
																			.show();
																}
															},
															error : function() {

																alert('Ajax readyState: '
																		+ xhr.readyState
																		+ '\nstatus: '
																		+ xhr.status
																		+ ' '
																		+ err);
															}
														});
											}
										});

						//ÄÄng nháº­p á» ÄÃ¢y
						$('#logout')
								.click(
										function() {
											var linksss = "http://"
													+ location.host
													+ "/traficforecast/process/checklogin.jsp?id=logout";
											$
													.ajax({
														dataType : 'json',
														url : linksss,
														type : 'POST',
														success : function(
																result) {
															if (result.res) {
																window.location.href = 'index.jsp';
															} else {
																$(
																		"#login_error")
																		.show();
															}
														},
														error : function() {
															alert('Ajax readyState: '
																	+ xhr.readyState
																	+ '\nstatus: '
																	+ xhr.status
																	+ ' ' + err);
														}
													});
										});

						//ÄÄng kÃ­ á» ÄÃ¢y
						$('#signup')
								.click(
										function() {
											var username = $('#username').val();
											var password = $('#password').val();
											var re_password = $('#re_password')
													.val();
											if (username == ""
													|| password == ""
													|| re_password == ""
													|| password != re_password) {
												if (username == "") {
													$('#username_error').show();
												}
												if (password == "") {
													$('#password_error').show();
												}
												if (re_password == ""
														|| password != re_password) {
													$('#re_password_error')
															.show();
												}
											} else {
												var objSignup = {
													username : username,
													password : $.md5(password),
												};
												$
														.ajax({
															url : "",
															type : "POST",
															contentType : "application/json; charset=utf-8",
															dataType : "JSON",
															data : JSON
																	.stringify(objSignup),
															success : function(
																	result) {
																if (result) {
																	alert('ÄÄng kÃ­ ok.');
																} else {
																	$(
																			'#signup_error')
																			.show();
																}
															},
															error : function(
																	xhr,
																	status, err) {
																$(
																		'#signup_error')
																		.show();
															},
															timeout : 3000
														});
											}
										});
					});
</script>

<script type="text/javascript">
	$(document)
			.ready(
					function() {
						$(document).click(function(event) {
							var ele = $(event.target);
							if (!ele.is($('#form_direct').find('*'))) {
								$('#input_text_direct').hide();
							}
						});
						$('#btn_direct').mouseover(function() {
							$('#input_text_direct').show();
						});
						$('#btn_direct')
								.click(
										function() {
											var direct_1 = $('#direct1').val();
											var direct_2 = $('#direct2').val();
											if (direct_1 == ""
													|| direct_2 == "") {
												if (direct_1 == "") {
													$('#direct1_error').show();
												}
												if (direct_2 == "") {
													$('#direct2_error').show();
												}
											} else {

												var objDirect = ({
													direct1 : direct_1,
													direct2 : direct_2
												});
												var jsonobj = JSON
														.stringify(objDirect);
												var link_find = 'http://'
														+ location.host
														+ '/traficforecast/process/findway.jsp';
												$
														.ajax({
															url : link_find,
															type : "POST",
															dataType : "json",
															data : {
																para : jsonobj
															},
															success : function(
																	result) {
																var way_list = result.arr;
																var len = way_list.length;
																if (way_list[0].status) {
																	var start = new google.maps.LatLng(
																			way_list[1].lat,
																			way_list[1].lng);
																	map
																			.setCenter(start);

																	var j;
																	for (j = 1; j < len-1; j++) {
																		var flightPlanCoordinates = [
																				new google.maps.LatLng(
																						way_list[j].lat,
																						way_list[j].lng),
																				new google.maps.LatLng(
																						way_list[j+1].lat,
																						way_list[j+1].lng) ];
																		var flightPath = new google.maps.Polyline(
																				{
																					path : flightPlanCoordinates,
																					geodesic : true,
																					strokeColor : '#FF0000',
																					strokeOpacity : 1.0,
																					strokeWeight : 2
																				});

																		flightPath
																				.setMap(map);
																	}
																	//var lat_start = parseFloat(way_list[1].lat);
																	//var lng_start = parseFloat(way_list[1].lng);

																	//var lat_end = parseFloat(way_list[len - 1].lat);
																	//var lng_end = parseFloat(way_list[len - 1].lng);

																	// 																	var start = new google.maps.LatLng(
																	// 																			way_list[1].lat,
																	// 																			way_list[1].lng);
																	// 																	var end = new google.maps.LatLng(
																	// 																			way_list[len - 1].lat,
																	// 																			way_list[len - 1].lng);

																	// 																	map
																	// 																			.setCenter(start);

																	// 																	var waypoint = [];
																	// 																	var j = 2;
																	// 																	while (j < len - 1) {
																	//var lat_mid = parseFloat(way_list[j].lat);
																	//var lng_mid = parseFloat(way_list[j].lng);
																	// 																		waypoint
																	// 																				.push({
																	// 																					location : new google.maps.LatLng(
																	// 																							way_list[j].lat,
																	// 																							way_list[j].lng),
																	// 																					stopover : true
																	// 																				});
																	// 																		j = j + 1;
																	// 																	}

																	// 																	var dirService = new google.maps.DirectionsService();
																	// 																	var dirRenderer = new google.maps.DirectionsRenderer(
																	// 																			{
																	// 																				suppressMarkers : true
																	// 																			});
																	// 																	dirRenderer
																	// 																			.setMap(map);
																	// 																	// highlight a street
																	// 																	var request = {
																	// 																		origin : start,
																	// 																		destination : end,
																	// 																		waypoints : waypoint,
																	// 																		unitSystem : google.maps.UnitSystem.METRIC,
																	// 																		travelMode : google.maps.TravelMode.WALKING
																	// 																	};
																	// 																	dirService
																	// 																			.route(
																	// 																					request,
																	// 																					function(
																	// 																							result,
																	// 																							status) {
																	// 																						if (status == google.maps.DirectionsStatus.OK) {
																	// 																							dirRenderer
																	// 																									.setDirections(result);
																	// 																						}
																	// 																					});

																} else {
																	alert("Không tìm thấy.");
																}
															},
															error : function(
																	xhr,
																	status, err) {

															}

														});
											}
										});
					});
</script>
<script type="text/javascript">
	$(document).ready(function() {
		google.maps.event.addDomListener(window, 'load', initialize);
	});
</script>

<script type="text/javascript">
	var map;
	function initialize() {
		var mapOptions = {
			center : {
				lat : 21.0061946,
				lng : 105.8431751
			},
			zoom : 16
		};
		map = new google.maps.Map(document.getElementById('map-canvas'),
				mapOptions);
		var input_search = document.getElementById('search');
		var input_direct1 = document.getElementById('direct1');
		var input_direct2 = document.getElementById('direct2');

		new google.maps.places.Autocomplete(input_search);
		new google.maps.places.Autocomplete(input_direct1);
		new google.maps.places.Autocomplete(input_direct2);
	}
</script>

</html>